<template>
  <view :style="[styles]" style="overflow: hidden">
    <u-button
      style="height: 100%"
      :type="attribute.type"
      :color="attribute.color || themeColor"
      :text="attribute.text"
      :customStyle="{
        color:
          attribute.color === '#ffffff' || themeColor === '#ffffff'
            ? 'black'
            : attribute.fontColor
            ? attribute.fontColor
            : '#ffffff',
      }"
      @click="submitHandle"
    >
    </u-button>
  </view>
</template>

<script>
import { COMPREIFX } from "../../../libs/const/widget";

export default {
  name: `${COMPREIFX}submit-button`,
  props: {
    attribute: Object,
    styles: Object,
  },
  computed: {
    themeColor() {
      return this.$theme.themeColor[this.attribute.type];
    },
  },
  methods: {
    submitHandle() {
      this.$emit("event", {
        eventName: "submitForm",
        attribute: this.attribute,
      });
    },
  },
};
</script>

<style scoped></style>
